<template>
	<view :class="'easy-loadimage ' + mode" :style="imgstyle">
		<vimage :style="imgstyle" v-if="sellout" class="sellout" :src="sell_out_pic"></vimage>
		<block v-if="imgurl">
			<template v-if="loadImg">
				<u-lazy-load  @load="imgLoaded" @error="imgLoadede" :loading-img="loadImg" :border-radius="borderradius" :style="imgstyle" :img-mode="mode" :image="imgurl"></u-lazy-load>
			</template>
			<template v-else>
				<u-lazy-load  @load="imgLoaded" @error="imgLoadede"  :border-radius="borderradius" :style="imgstyle" :img-mode="mode" :image="imgurl"></u-lazy-load>
			</template>
		</block>
	
	</view>
</template>
<script>
import base from '@/common/baseUrl.js';
import util from '@/common/util.js'
export default {
	props: {
		imageSrc: {
			type: String
		},
		mode: {
			type: String,
			default:"widthFix"
		},
		sellout: {
			type: Boolean
		},
		imgstyle: {
			type: String
		},
		borderradius: {
			type: Number
		}
	},
	computed: {
		imgurl(){
			// console.log(util.getimgurl(this.imageSrc))
			return util.getimgurl(this.imageSrc)
		}
	},
	created() {
		// this.imgurl=
		this.getjuris("mallBase").then(a=>{		
			if(a.load_pic){
				this.loadImg=util.getimgurl(a.load_pic)
			}else{
				this.loadImg=""
			}
			if(a.sell_out_pic){
				this.sell_out_pic=a.sell_out_pic
			}else{
				this.sell_out_pic=''
			}
			
		})
	},
	data() {
		return {
			uid: '',
			loadImg: "",
			showImg: false,
			isLoadError: false,
			showTransition: false,
			sell_out_pic:''
		};
	},
	methods:{
		imgLoaded(){
			this.$emit("load")
		},
		imgLoadede(){			
			this.$emit("error")
		}
	}
	
};
</script>

<style scoped lang="scss">
.easy-loadimage {
	height: 100%;
	overflow: hidden;
	position: relative;
	.sellout {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}
}
.act {
	/deep/.u-wrap {
		height: 100%;
		.u-lazy-item {
			// border-radius:0 ;
		}
	}
}
</style>
